<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      {{rowData&&rowData.id ? '编辑' :'新增'}}三方支付
    </template>
    <el-form :model="form" ref="refForm" :rules="rules" label-width="180px">
      <el-form-item label="充值名称显示" prop="paymentId">
        <el-select v-model="form.paymentId">
          <el-option
            v-for="item in paymentManageList"
            :key="item.paymentId"
            :value="item.paymentId"
            :label="item.paymentName"
          ></el-option>
        </el-select>
      </el-form-item>
      <div v-if="[7,8,9].indexOf(form.paymentId) !== -1">
        <el-form-item label="银行名称" prop="payeeBank">
          <el-select v-model="form.payeeBank" @change="payeeBankChange">
            <el-option
              v-for="o in payeeBankList"
              :label="o.bankName"
              :value="o.bankId"
              :key="o.bankId"
              :disabled="(form.paymentId === 8 && o.bankId!==101 && o.bankId!==1001 && o.bankId!==1002) || (form.paymentId !== 8 && o.bankId ===101)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="银行卡号" prop="merchantId" v-if="form.payeeBank !== 101" :key="form.merchantId">
          <el-select v-model="form.merchantId" :key="form.merchantId">
            <el-option
              v-for="o in payeeBankCardList"
              :label="o.cardNo"
              :value="o.cardId"
              :key="o.cardNo"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开户姓名" prop="merchantId" v-else-if=" form.payeeBank === 101" :key="form.merchantId">
          <el-select v-model="form.merchantId" :key="form.merchantId">
            <el-option
              v-for="o in payeeBankCardList"
              :label="o.name"
              :value="o.cardId"
              :key="o.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-else>
        <el-form-item label="三方支付名称" prop="channelId">
          <el-select v-model="form.channelId" @change="escrowPlatformChange">
            <el-option
              v-for="o in escrowPlatformList"
              :label="o.channelName"
              :value="o.channelId"
              :key="o.channelId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商户号" prop="merchantId">
          <el-select v-model="form.merchantId">
            <el-option
              v-for="o in shopNoList"
              :label="o.merchantCode"
              :value="o.merchantId"
              :key="o.merchantId"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="应用端" prop="clientType">
        <el-select v-model="form.clientType">
          <el-option
            v-for="o in consts.PAYMENT_PLATFORM"
            :label="o.title"
            :value="o.value"
            :key="o.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-col :span="16">
          <el-input type="textarea" v-model="form.remark" @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addEscrowSet,
  // getEscrowSetDetail,
  getBankCardList,
  getAlipayNameList,
  getPaymentManageList,
  getPaymentManageChannelList,
  getPayeeBankList,
  getEscrowShopNoList,
} from '@/services/api/recharge';

import { form, factory } from '@/build';

export default {

  name: 'escrow-setting-dialog',

  props: ['value', 'id', 'rowData', 'type'],

  mixins: [form, factory],

  data() {
    return {
      payeeBankList: [],
      payeeBankCardList: [],
      payeeNameList: [],
      shopNoList: [],
      rechargeType: 1,
      paymentManageList: [],
      escrowPlatformList: [],
      form: {
        id: this.id,
        channelId: undefined,
        merchantId: undefined,
        clientType: undefined,
        paymentId: undefined,
        remark: undefined,
        cardId: undefined,
        name: undefined,
        ...this.rowData,
        // payeeBank: 101
      },
      applyData: {},
      rules: {
        paymentId: [
          { required: true, message: '充值名称显示不能为空' },
        ],
        channelId: [
          { required: true, message: '三方平台不能为空' },
        ],
        name: [
          { required: true, message: '开户姓名不能为空' },
        ],
        merchantId: [
          { required: true, message: '三方账号不能为空' },
        ],
        payeeBank: [
          { required: true, message: '银行名称不能为空' },
        ],
        // bankCard: [
        //   {required: true, message: '银行卡号不能为空'}
        // ],
        clientType: [
          { required: true, message: '应用端为不能为空' },
        ],
        remark: [
          { required: true, message: '备注不能为空' },
        ],
      },
    };
  },
  watch: {
    'form.payeeBank': {
      handler(val) {
        this.getPayeeBankCardList(val);
      },
      // 深度观察
      deep: true,
      immediate: true,
    },
    'form.paymentId': {
      handler(val) {
        this.form.channelId = undefined;
        this.form.merchantId = undefined;
        this.form.payeeBank = undefined;
        if (val == 8) {
          this.form.payeeBank = 101;
          this.getPayeeBankCardList(101);
        }
      },
      // 深度观察
      deep: true,
      immediate: true,
    },
  },

  methods: {
    // rechageTypeChange(val){
    //   if(val>9){
    //     this.rechargeType =1
    //     if(val == 10){
    //       this.form.payeeBank = 16
    //       return
    //     }
    //   }else{
    //     this.rechargeType = 2
    //   }
    //   this.form.payeeBank = undefined
    // },
    getPayeeNameList(id) {
      getAlipayNameList({ id }).then(([result, data]) => {
        if (result) {
          this.payeeNameList = data.list;
        }
      });
    },
    getPayeeBankCardList(id) {
      getBankCardList({ bankId: id }).then(([result, data]) => {
        if (result) {
          this.payeeBankCardList = data.list;
        }
      });
    },

    payeeBankChange(val) {
      this.form.merchantId = undefined;
      this.getPayeeBankCardList(val);
      // 若是支付宝二维码
      // if(val === 16){
      //   getAlipayNameList({id:val}).then(([result,data])=>{
      //     if(result){
      //       this.payeeNameList = data.list
      //     }
      //   })
      // }else{
      //   getBankCardList({id:val}).then(([result,data])=>{
      //     if(result){
      //       this.payeeBankList= data.list
      //     }
      //   })
      // }
    },
    escrowPlatformChange(val) {
      this.form.merchantId = undefined;
      getEscrowShopNoList({ channelId: val, limitType: -1 }).then(([result, data]) => {
        if (result) {
          this.shopNoList = data.list;
        }
      });
    },

  },
  mounted() {
    // this.getPayeeBankCardList(101);
    this.bindSave(addEscrowSet, 'saveForm', 'form', {
      beforeSend: data => ({ ...data, id: this.id }),
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });

    if (this.id) {
      this.bindGet(getEscrowShopNoList, 'shopNoList', {
        sendingData: { channelId: this.form.channelId },
        format: data => data.list,
      });
    }

    this.bindGet(getPayeeBankList, 'payeeBankList', {
      format: (data) => {
        const fund = _.find(data, item => item.bankId == 101);
        const remove = _.remove(data, item => item.bankId == 101);
        data.unshift(fund);
        return data;
      },
    });
    this.bindGet(getPaymentManageList, 'paymentManageList', {
      format: (data) => {
        data = _.filter(data, (item) => {
          if (this.type === 'transfer') {
            return item.paymentId == 7 || item.paymentId == 8 || item.paymentId == 9;
          }
          return item.paymentId != 7 && item.paymentId != 8 && item.paymentId != 9;
        });
        return data || [];
      },
    });
    this.bindGet(getPaymentManageChannelList, 'escrowPlatformList');
    this.getAll();
  },
};
</script>

<style scoped>
</style>
